import React, { useState } from 'react';
import { Table, Button, Popconfirm, message } from 'antd';
import Search from 'antd/es/input/Search';

const Approval = () => {
  const [searchText, setSearchText] = useState('');
  const [requests, setRequests] = useState([
    {
      key: '1',
      bookTitle: 'React 入门',
      borrower: '陈江华',
      requestDate: '2023-10-01',
    },
    {
      key: '2',
      bookTitle: 'JavaScript 高级程序设计',
      borrower: '李四',
      requestDate: '2023-10-02',
    },
  ]);

  const handleApprove = (key: any) => {
    setRequests(requests.filter((request) => request.key !== key));
    message.success('借阅请求已通过');
  };

  const handleReject = (key: any) => {
    setRequests(requests.filter((request) => request.key !== key));
    message.error('借阅请求已拒绝');
  };

  const handleSearch = (e: any) => {
    console.log(e, 'handleSearch')
    setSearchText(e);
  };

  const columns = [
    { title: '书名', dataIndex: 'bookTitle', key: 'bookTitle' },
    { title: '借阅人', dataIndex: 'borrower', key: 'borrower' },
    { title: '请求日期', dataIndex: 'requestDate', key: 'requestDate' },
    {
      title: '操作',
      dataIndex: 'operation',
      render: (_: any, record: any) => (
        <span>
          <Popconfirm
            title="确定通过此请求?"
            onConfirm={() => handleApprove(record.key)}
          >
            <Button type="primary" style={{ marginRight: 8 }}>
              通过
            </Button>
          </Popconfirm>
          <Popconfirm
            title="确定拒绝此请求?"
            onConfirm={() => handleReject(record.key)}
          >
            <Button color='red'>拒绝</Button>
          </Popconfirm>
        </span>
      ),
    },
  ];

  const filteredBooks = requests.filter((approval) =>
    approval.borrower.toLowerCase().includes(searchText.toLowerCase())
  );


  return (
    <div style={{ padding: '20px' }}>
      <Search
        placeholder="搜索借阅人"
        onSearch={handleSearch}
        style={{ marginBottom: 16, width: 300, marginRight: 16 }}
      />

      <Table columns={columns} dataSource={filteredBooks} />
    </div>
  );
};

export default Approval;